<template>
  <div>
    <div ref="map" style="background-color: rgb(28, 38, 48);height: 380px;border-radius:25px;"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'mapdata',
    data(){
      return {
        scatterData:[
          {
            name:'超级金主',//总订单金额>=10w
            children:[
              {
                name:'漯河',
                value:[114.026405,33.575855]
              },
              {
                name:'武汉',
                value:[114.298572, 30.584355]
              }
            ]
          },
          {
            name:'金主',//总订单金额>=5w
            children:[
              {
                name:'杭州',
                value:[120.153576, 30.287459]
              },
              {
                name:'上海',
                value:[121.48,31.22]
              },
            ]
          },
          {
            name:'普通客户',//总订单金额>=1w
            children:[
              {
                name:'拉萨',
                value:[91.132212,29.660361]
              },
              {
                name:'黄石',
                value:[115.077048, 30.220074]
              }
            ]
          }
        ]
      }
    },
    methods:{
      async getmap(){
        this.chartinstance = this.$echarts.init(this.$refs.map)
        const map = await axios.get('http://117.72.14.227/map/china.json') 
        this.$echarts.registerMap('china',map.data)
        const initoption = {
          title:{
            text:'商家分布',
            left: 20,
            top: 20,
            textStyle: {
              color: '#FFF',
            },
          },
          geo:{
            type: 'map',
            map: 'china',
            roam: true,
            top: '5%',
            bottom: '5%',
            emphasis: {
              focus: "self", //突出选中的区域 其它区域谈化效果
              itemStyle: {
                opacity: 1,
                borderColor: "#FFF8DC",
                borderWidth: "2",
                areaColor: "#FFA07A"
              }
            },
          }
        }
        this.chartinstance.setOption(initoption)
        //散点图引入及样式配置
        const scatterArr = this.scatterData.map(item => {
          return {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect:{
              scale: '6'
            },
            name: item.name,
            data: item.children,
          }
        })
        const legendArr = this.scatterData.map(item => {
          return item.name
        })
        const scatterOption = {
          tooltip: {
             formatter: function(params) {
               return params.name;
             }  
          },
          legend:{
            data:legendArr,
            top: '2%',
            textStyle:{
              color:'#ccc',
            }
          },
          series: scatterArr
        }
        this.chartinstance.setOption(scatterOption)
      }
    },
    mounted(){
      this.getmap()
    }
}
</script>

<style>

</style>